<template>
    <div class="user" ref="user">
        <div class="tx-c user-bg tx-c-wh">
            <h1 class="m-h-text">个人中心</h1>
            <div v-show="bfUserInfo">
                <div class="iconSize-4 icon-bor" :style="{backgroundImage: 'url(' + avatar + ')'}"></div>
                <div class="userID-mar">{{ bfUserInfo.username }}</div>
                <div class="tx-s-14">余额：{{ bfUserInfo.balance }}</div>
            </div>
            <div v-show="!bfUserInfo">
                <div class="iconSize-4 icon-bor grzx_wdl"></div>
                <div class="login_now" @click="openNext('/login')">立即登录</div>
            </div>
        </div> 
        <div class="scroll-box tx-c-222 tx-s-14">
            <div class="flex-box flex-ac bg-c-wh padd-bt">
                <div class="flex-box flex-at flex-ac flex-f1 tx-c" @click="openNext('/recharge')">
                    <div class="iconSize-175 grzx_cz"></div>
                    <div class="mar-t-25">充值</div>
                </div>
                <div class="line"></div>
                <div class="flex-box flex-at flex-ac flex-f1 tx-c" @click="openNext('/withdrawal')">
                    <div class="iconSize-175 grzx_tx"></div>
                    <div class="mar-t-25">提现</div>
                </div>
            </div>
            <div class="flex-box flex-wp marg-075">
                <div class="flex-box flex-at flex-ac but-bor"
                :class="{'bor-r-g' : value[2] == 1}"
                v-for="(value, key, i) in list" :key="i"
                @click="openNext(value[1])">
                    <div class="iconSize-175" :class="value[0]"></div>
                    <div class="mar-t-25">{{ key }}</div>
                </div>
                <div class="flex-box flex-at flex-ac but-bor bor-r-g" @click="openNext('/messageCenter')">
                    <div class="flex-box">
                        <div class="iconSize-175 grzx_xx"></div>
                        <div v-if="bfUserInfo.msgtag == 1" class="circle-msg"></div>
                    </div>
                    <div class="mar-t-25">消息中心</div>
                </div>
                <div class="flex-box flex-at flex-ac but-bor" @click="openNext('/setting')">
                    <div class="iconSize-175 grzx_set"></div>
                    <div class="mar-t-25">设置</div>
                </div>
                <div class="flex-box flex-at flex-ac but-bor bor-r-g" v-if="bfUserInfo.types == 1 || bfUserInfo.types == 2" @click="openNext('/vipCenter')">
                    <div class="iconSize-175 grzx_hygl"></div>
                    <div class="mar-t-25">会员管理</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
import 'common/css/user.css'
import { mapGetters } from 'vuex'
import { isDefine } from '../common/js/common'
export default {
    data() {
        return { 
            avatar : '',
            list : {
                '战绩' : ['grzx_zj', '/myRecord', 1],
                '账户明细' : ['grzx_zhmx', '/accountDetails', 0],
                '个人资料' : ['grzx_grzl', '/personalMsg', 1],
                '客服' : ['grzx_kf', '/serviceHtml', 0]
            }
        }
    },
    created() { 
        this.avatar = this.bfUserInfo.avatar || require('../common/image/jzsb.png')
    },
    methods: {
        openNext (page) {
            this.avatar = ''
            if(!isDefine(this.bfUserInfo)){
                this.$router.push('/login')
            }else if(!this.$store.state.bindingName){
                this.$router.push('/bindingName')
            }else if(page == '/withdrawal' && !this.bfUserInfo.bankCardBinded){ 
                const _this = this // 需要注意 onCancel 和 onConfirm 的 this 指向
                this.$vux.confirm.show({
                    // 组件除show外的属性
                    content: '您还未绑定银行卡',
                    cancelText: '取消',
                    confirmText: '立即绑定',
                    hideOnBlur: true,
                    onCancel () {
                    },
                    onConfirm () {
                        _this.$router.push('/bindingCard')
                    }
                }) 
            }else{
                this.$router.push(page)
            }
        }
    },
    computed: {
        ...mapGetters([
            'bfUserInfo'
        ])
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable" 
    .user
        position : fixed
        width : 100%
        top : 0
        bottom : 3.25rem
        background: $color-f0
    .icon-bor
        border : 2px solid $color-t-w3
        border-radius : 100% 100%
    .userID-mar
        margin : .75rem 0 .5rem 0
    .login_now
        line-height : 1.75rem
        width : 10rem
        border : 1px solid $color-f0
        border-radius : 1rem 1rem
        font-size : $fonts-14
        margin: 1rem auto 0 auto
    .scroll-box
        position : fixed
        width : 100%
        top : 11rem
        bottom : 3.25rem
        overflow: auto
    .scroll-box::-webkit-scrollbar
        display : none
    .padd-bt
        padding : .5rem 0
    .line
        height : 2rem
        border-right : 1px solid $color-f0
    .iconSize-175{
        width: 1.75rem
        height: 1.75rem
        background-size: 100% auto
    }
    .but-bor
        width : 49.5%
        padding : .5rem 0
        text-align : center
        background : white
        border-bottom : 1px solid $color-f0
    .grzx_cz
        background-image : url('../common/image/grzx_cz.png')
    .grzx_tx
        background-image : url('../common/image/grzx_tx.png')
    .grzx_zj
        background-image : url('../common/image/grzx_zj.png')
    .grzx_zhmx
        background-image : url('../common/image/grzx_zhmx.png')
    .grzx_grzl
        background-image : url('../common/image/grzx_grzl.png')
    .grzx_kf
        background-image : url('../common/image/grzx_kf.png')
    .grzx_xx
        background-image : url('../common/image/grzx_xx.png')
    .grzx_set
        background-image : url('../common/image/grzx_set.png')
    .grzx_hygl
        background-image : url('../common/image/grzx_hygl.png')
    .circle-msg
        height: .5rem
        width: .5rem
        border-radius: 100% 100%
        background-color : $color-r
</style>

